<template>
  <el-dialog
    title="添加物品"
    :visible.sync="show"
    width="calc(100% - 80px)"
    top="10px"
    custom-class="goods-manage-dialog"
    :modal-append-to-body="false"
    :append-to-body="false"
    :before-close="handleClose">
    <div class="wh100">
      <el-tabs v-model="addType" @tab-click="changeAddType" style="margin-top: 10px">
        <el-tab-pane label="搜索添加" name="1"></el-tab-pane>
        <el-tab-pane label="手动添加" name="2"></el-tab-pane>
<!--        <el-tab-pane label="闲置添加" name="3"></el-tab-pane>-->
      </el-tabs>
      <template v-if="addType==='1'">
        <div class="search-row">
          <div class="flex-center">
            <el-input v-model="formData.gmName" placeholder="请输入物品名称或编号" suffix-icon="el-icon-search" style="width: 280px !important;"></el-input>
            <el-button type="primary" class="search-btn" @click="search">查询</el-button>
          </div>
          <div class="flex-center">
            <span class="label">物品分类：</span>
            <el-select v-model="formData.gmType" placeholder="请选择物品分类">
              <el-option
                v-for="item in gmTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="table-box">
          <el-table
            class="goods-table"
            :header-cell-style="{background:'#fafafa',color:'#565551'}"
            max-height="100%"
            height="100%"
            border
            :data="tableData"
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55"
            >
            </el-table-column>
            <el-table-column
              prop="gmId"
              label="物品编号"
              width="130"
            >
            </el-table-column>
            <el-table-column
              prop="gmName"
              label="物品名称"
              width="130"
            >
            </el-table-column>
            <el-table-column
              prop="gmSpec"
              label="物品规格"
              width="110"
            >
            </el-table-column>
            <el-table-column
              prop="gmModel"
              label="物品型号"
              width="110"
            >
            </el-table-column>
            <el-table-column
              prop="gmBrand"
              label="品牌"
              width="110"
            >
            </el-table-column>
            <el-table-column
              prop="gmStatus"
              label="状态"
              width="90"
            >
              <template slot-scope="scope">
                <div class="td-gmStatus-btn btn0" v-if="scope.row.gmStatus==='0'">禁用</div>
                <div class="td-gmStatus-btn btn1" v-else-if="scope.row.gmAssetsType==='1'">正常</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="gmAssetsType"
              label="资产类型"
              width="110"
            >
              <template slot-scope="scope">
                <template v-if="scope.row.gmAssetsType==='1'">固定资产</template>
                <template v-else-if="scope.row.gmAssetsType==='2'">低值易耗品</template>
              </template>
            </el-table-column>
            <el-table-column
              prop="wtmStatus"
              label="物品分类"
              width="110"
            >
              <template slot-scope="scope">
                {{ scope.row.wtmStatus === '5' ? '监控设备' : scope.row.wtmStatus }}
              </template>
            </el-table-column>
            <el-table-column
              prop="gmDefaultUnit"
              label="计量单位"
              width="90"
            >
            </el-table-column>
            <el-table-column
              prop="gmProportion"
              label="默认比例"
              width="90"
            >
            </el-table-column>
            <el-table-column
              prop="gmPurchaseType"
              label="采购类型"
              width="90"
            >
              <template slot-scope="scope">
                <template v-if="scope.row.gmPurchaseType==='0'">全部</template>
                <template v-else-if="scope.row.gmPurchaseType==='1'">自主采购</template>
                <template v-else-if="scope.row.gmPurchaseType==='2'">上级采购</template>
              </template>
            </el-table-column>
            <el-table-column
              prop="gmUnitLevel"
              label="计量单位级别"
              width="120"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="table-page">
          <span class="total">共{{ listPage.total }}条数据</span>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="listPage.total"
            @current-change="handleCurrentChangeList"
            @handleSizeChange="handleSizeChangeList"
            :page-size="listPage.pageSize"
            :current-page="listPage.pageNo"
            :pager-count="5"
          />
        </div>
      </template>
      <template v-if="addType==='2'">
        <div class="warning-tip">
          <div class="gth">!</div>
          <span>物品名称与物品分类请与集团采购本部采购专员确认后填写</span>
        </div>
        <el-form class="manual-form" :model="manualData" :rules="manualRules" label-position="left" label-width="80px">
          <div class="manual-info">
            <div class="row w50">
              <el-form-item label="物品名称" prop="name">
                <el-input v-model="manualData.name" placeholder="请输入"></el-input>
              </el-form-item>
            </div>
            <div class="row w50">
              <el-form-item label="物品分类" prop="gmType">
                <el-cascader v-model="manualData.gmType" :options="gmTypeOptions" placeholder="请选择"></el-cascader>
              </el-form-item>
            </div>
            <div class="row w50">
              <el-form-item label="品牌" prop="brand">
                <el-input v-model="manualData.brand" placeholder="请输入"></el-input>
              </el-form-item>
            </div>
            <div class="row w50">
              <el-form-item label="单位" prop="defaultUnit">
                <el-input v-model="manualData.defaultUnit" placeholder="请输入"></el-input>
              </el-form-item>
            </div>
            <div class="row w50">
              <el-form-item label="型号" prop="model">
                <el-input v-model="manualData.model" placeholder="请输入"></el-input>
              </el-form-item>
            </div>
            <div class="row w50">
              <el-form-item label="规格" prop="spec">
                <el-input v-model="manualData.spec" placeholder="请输入"></el-input>
              </el-form-item>
            </div>
            <div class="row w50">
              <el-form-item label="参考单价" prop="spec">
                <el-input v-model="manualData.referPrice" placeholder="请输入"></el-input>
              </el-form-item>
            </div>
            <div class="row w100">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="manualData.remark" placeholder="请输入" type="textarea" style="width: 100%"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </template>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="danger" @click="save" class="rbtn">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import moment from 'moment'
import addressSelector from "./addressSelector.vue";
export default {
  components: {
    addressSelector
  },
  name: "",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    },
    info: {
      type: Object,
      default: ()=>{}
    },
  },
  data() {
    return {
      addType: '1',
      formData: {
        gmName: '',
        gmType: '',
      },
      manualData: {
        name: '',
        brand: '',
        gmType: '',
        spec: '',
        model: '',
        remark: '',
        defaultUnit: '',
        referPrice: '',
      },
      gmTypeList: [],
      gmTypeOptions: [],
      tableData: [],
      tableSelectedRow: [],//选中的
      listPage: {
        total: 0,
        pageSize: 10,
        pageNo: 1,
      },
      manualRules: {
        name: [
          { required: true, trigger: 'blur', message: '请输入物品名称' },
        ],
        gmType: [
          { required: true, trigger: 'change', message: '请选择物品分类' },
        ],
        defaultUnit: [
          { required: true, trigger: 'blur', message: '请输入物品单位' },
        ],
        spec: [
          { required: true, trigger: 'blur', message: '请输入物品规格' },
        ],
      },
    }
  },
  computed: {
  },
  mounted() {
    this.search()
  },
  methods: {
    handleClose() {
      this.$emit('close',false)
    },
    save(row) {
      if(this.tableSelectedRow.length === 0){
        return this.$showMsg('请先选择一条数据', 'warning')
      }
      if(this.tableSelectedRow.length > 1){
        return this.$showMsg('只能选择一条数据', 'warning')
      }
      this.$emit('close',true, this.type, this.tableSelectedRow[0], this.info.index || 0)
    },
    //查询地址
    search(){
      this.tableData = JSON.parse('[{"createDate":"2023-02-18 10:43:32","updateDate":"2023-02-18 10:43:32","remark":"0","gmId":"GDZC10002","wtmPrice":null,"gmName":"蓝牙标签打印机","gmStatus":"0","gmAssetsType":"1","gmModel":"HM300L","gmType":"1002001","gmSpec":"无","gmFinanceType":null,"gmDefaultUnit":"0001","gmProportion":"1","gmPurchaseType":"2","gmUnitLevel":"1","gmCategory":null,"gmConvl":"1","gmRemark":null,"gmProc":null,"gmBrand":"汉印","acbId":null,"gmTypeName":"办公设备","gmFinanceTypeName":null,"gmDefaultUnitName":"台","gmProportionName":null,"asNo":null,"gmCurrentUnit":null,"gmCurrentUnitName":null,"singleUnitName":"台","miniPrice":null,"supplier":null,"referPrice":null,"referencePreSupplier":null,"referenceCustomerNo":null,"wareHouseName":null,"manageSeq":null,"confirm":null,"deptJms":null,"gmSource":2,"specialType":"1","taxPointPrice":null,"totalPrice":null},{"createDate":"2023-07-08 12:35:06","createNumber":1458274657214935042,"updateDate":"2023-07-08 12:35:06","updateNumber":1458274657214935042,"remark":"0","gmId":"GDZC1020059","wtmPrice":"11111.0000","gmName":"电脑显示器","gmStatus":"0","gmAssetsType":"1","gmModel":"L20-19","gmType":"1002001002","gmSpec":"19.5寸","gmFinanceType":null,"gmDefaultUnit":"0001","gmProportion":"1","gmPurchaseType":"2","gmUnitLevel":"1","gmCategory":null,"gmConvl":"1","gmRemark":null,"gmProc":null,"gmBrand":"联想","acbId":null,"gmTypeName":"电脑显示器","gmFinanceTypeName":null,"gmDefaultUnitName":"台","gmProportionName":null,"asNo":null,"gmCurrentUnit":null,"gmCurrentUnitName":null,"singleUnitName":"台","miniPrice":null,"supplier":null,"referPrice":435,"referencePreSupplier":"福州东盛电子技术有限公司","referenceCustomerNo":"KH-20230213-002105","wareHouseName":null,"manageSeq":null,"confirm":null,"deptJms":null,"gmSource":2,"specialType":"1,2,3","taxPointPrice":null,"totalPrice":null},{"createDate":"2023-02-24 15:37:44","updateDate":"2023-02-24 15:37:44","remark":"0","gmId":"GDZC10007","wtmPrice":"390.0000","gmName":"考勤机","gmStatus":"0","gmAssetsType":"1","gmModel":"TX628","gmType":"1002001","gmSpec":"网络型","gmFinanceType":null,"gmDefaultUnit":"0001","gmProportion":"1","gmPurchaseType":"0","gmUnitLevel":"1","gmCategory":null,"gmConvl":"0","gmRemark":null,"gmProc":null,"gmBrand":"无","acbId":null,"gmTypeName":"办公设备","gmFinanceTypeName":null,"gmDefaultUnitName":"台","gmProportionName":null,"asNo":null,"gmCurrentUnit":null,"gmCurrentUnitName":null,"singleUnitName":"台","miniPrice":null,"supplier":null,"referPrice":390,"referencePreSupplier":"厦门城荣科技有限公司福州分公司","referenceCustomerNo":"KH-20230213-002107","wareHouseName":null,"manageSeq":null,"confirm":null,"deptJms":null,"gmSource":2,"specialType":null,"taxPointPrice":null,"totalPrice":null},{"createDate":"2023-02-18 10:43:32","updateDate":"2023-02-18 10:43:32","remark":"0","gmId":"GDZC20012","wtmPrice":"320.0000","gmName":"摄像机","gmStatus":"0","gmAssetsType":"1","gmModel":"DS-2CD2325V3-I 2.8mm半球型","gmType":"1002002","gmSpec":"无","gmFinanceType":null,"gmDefaultUnit":"0001","gmProportion":"1","gmPurchaseType":"2","gmUnitLevel":"1","gmCategory":null,"gmConvl":"0","gmRemark":null,"gmProc":null,"gmBrand":"海康威视","acbId":null,"gmTypeName":"安防、通讯设备","gmFinanceTypeName":null,"gmDefaultUnitName":"台","gmProportionName":null,"asNo":null,"gmCurrentUnit":null,"gmCurrentUnitName":null,"singleUnitName":"台","miniPrice":null,"supplier":null,"referPrice":320,"referencePreSupplier":"福州海康威视数字技术有限公司","referenceCustomerNo":"KH-20230210-002090","wareHouseName":null,"manageSeq":null,"confirm":null,"deptJms":null,"gmSource":2,"specialType":null,"taxPointPrice":null,"totalPrice":null},{"createDate":"2023-02-27 17:58:14","createNumber":1423569461587259393,"updateDate":"2023-02-27 17:58:14","updateNumber":1423569461587259393,"remark":"0","gmId":"GDZC10008","wtmPrice":"1600.0000","gmName":"打印机","gmStatus":"0","gmAssetsType":"1","gmModel":"DCP-7180DN","gmType":"1002001","gmSpec":"无","gmFinanceType":null,"gmDefaultUnit":"0001","gmProportion":"1","gmPurchaseType":"2","gmUnitLevel":"1","gmCategory":null,"gmConvl":"1","gmRemark":null,"gmProc":null,"gmBrand":"兄弟（brother）","acbId":null,"gmTypeName":"办公设备","gmFinanceTypeName":null,"gmDefaultUnitName":"台","gmProportionName":null,"asNo":null,"gmCurrentUnit":null,"gmCurrentUnitName":null,"singleUnitName":"台","miniPrice":null,"supplier":null,"referPrice":1600,"referencePreSupplier":"福州极光圣达计算机有限公司","referenceCustomerNo":"KH-20230213-002113","wareHouseName":null,"manageSeq":null,"confirm":null,"deptJms":null,"gmSource":2,"specialType":null,"taxPointPrice":null,"totalPrice":null},{"createDate":"2023-02-28 15:43:08","updateDate":"2023-02-28 15:43:08","remark":"0","gmId":"GDZC50001","wtmPrice":"1220.4000","gmName":"营业部办公桌","gmStatus":"0","gmAssetsType":"1","gmModel":"/","gmType":"1002005","gmSpec":"1300W*800D*760H 含三抽柜","gmFinanceType":null,"gmDefaultUnit":"0016","gmProportion":"1","gmPurchaseType":"2","gmUnitLevel":"1","gmCategory":null,"gmConvl":"0","gmRemark":null,"gmProc":null,"gmBrand":"华盛家具","acbId":null,"gmTypeName":"办公家具","gmFinanceTypeName":null,"gmDefaultUnitName":"张","gmProportionName":null,"asNo":null,"gmCurrentUnit":null,"gmCurrentUnitName":null,"singleUnitName":"张","miniPrice":null,"supplier":null,"referPrice":null,"referencePreSupplier":null,"referenceCustomerNo":null,"wareHouseName":null,"manageSeq":null,"confirm":null,"deptJms":null,"gmSource":2,"specialType":null,"taxPointPrice":null,"totalPrice":null},{"createDate":"2023-04-19 17:14:21","updateDate":"2023-04-19 17:14:21","remark":"0","gmId":"GDZC2260005","wtmPrice":"460.0000","gmName":"监控硬盘","gmStatus":"0","gmAssetsType":"1","gmModel":"ST4000VX000","gmType":"1002002026","gmSpec":"4T","gmFinanceType":null,"gmDefaultUnit":"0033","gmProportion":"1","gmPurchaseType":"2","gmUnitLevel":"1","gmCategory":null,"gmConvl":"0","gmRemark":null,"gmProc":null,"gmBrand":"希捷海康","acbId":null,"gmTypeName":"监控硬盘","gmFinanceTypeName":null,"gmDefaultUnitName":"块","gmProportionName":null,"asNo":null,"gmCurrentUnit":null,"gmCurrentUnitName":null,"singleUnitName":"块","miniPrice":null,"supplier":null,"referPrice":460,"referencePreSupplier":"福州海康威视数字技术有限公司","referenceCustomerNo":"KH-20230210-002090","wareHouseName":null,"manageSeq":null,"confirm":null,"deptJms":null,"gmSource":2,"specialType":"2","taxPointPrice":null,"totalPrice":null},{"createDate":"2024-01-11 11:56:57","createNumber":1455164125981192194,"updateDate":"2024-01-11 11:56:57","updateNumber":1455164125981192194,"remark":"0","gmId":"GDZC0285","wtmPrice":"1.0000","gmName":"监控专项02","gmStatus":"0","gmAssetsType":"1","gmModel":"11","gmType":"1002","gmSpec":"12","gmFinanceType":null,"gmDefaultUnit":"0007","gmProportion":"1","gmPurchaseType":"0","gmUnitLevel":"1","gmCategory":null,"gmConvl":"1","gmRemark":null,"gmProc":null,"gmBrand":"哈哈","acbId":null,"gmTypeName":"固定资产","gmFinanceTypeName":null,"gmDefaultUnitName":"桶","gmProportionName":null,"asNo":null,"gmCurrentUnit":null,"gmCurrentUnitName":null,"singleUnitName":"桶","miniPrice":null,"supplier":null,"referPrice":null,"referencePreSupplier":null,"referenceCustomerNo":null,"wareHouseName":null,"manageSeq":null,"confirm":null,"deptJms":null,"gmSource":2,"specialType":"2","taxPointPrice":null,"totalPrice":null},{"createDate":"2023-04-06 09:19:16","createNumber":1458274170600173570,"updateDate":"2023-04-06 09:25:59","updateNumber":1458274170600173570,"remark":"0","gmId":"GDZC7630004","wtmPrice":"2200.0000","gmName":"带称液压叉车","gmStatus":"0","gmAssetsType":"1","gmModel":"ECS-CL2T 防水","gmType":"1002007063","gmSpec":"宽脚 2T","gmFinanceType":null,"gmDefaultUnit":"0001","gmProportion":"1","gmPurchaseType":"2","gmUnitLevel":"1","gmCategory":null,"gmConvl":"0","gmRemark":null,"gmProc":null,"gmBrand":"飞亚","acbId":null,"gmTypeName":"带秤液压车","gmFinanceTypeName":null,"gmDefaultUnitName":"台","gmProportionName":null,"asNo":null,"gmCurrentUnit":null,"gmCurrentUnitName":null,"singleUnitName":"台","miniPrice":null,"supplier":null,"referPrice":null,"referencePreSupplier":null,"referenceCustomerNo":null,"wareHouseName":null,"manageSeq":null,"confirm":null,"deptJms":null,"gmSource":2,"specialType":null,"taxPointPrice":null,"totalPrice":null},{"createDate":"2023-07-04 10:37:07","updateDate":"2023-07-04 10:37:07","remark":"0","gmId":"GDZC1010016","wtmPrice":"3130.0000","gmName":"联想主机","gmStatus":"0","gmAssetsType":"1","gmModel":"M490S","gmType":"1002001001","gmSpec":"M490S-I3-10105 8G 1T机械硬盘  显卡GT1030  2G\\n","gmFinanceType":null,"gmDefaultUnit":"0001","gmProportion":"1","gmPurchaseType":"0","gmUnitLevel":"1","gmCategory":null,"gmConvl":"1","gmRemark":null,"gmProc":null,"gmBrand":"联想","acbId":null,"gmTypeName":"电脑主机","gmFinanceTypeName":null,"gmDefaultUnitName":"台","gmProportionName":null,"asNo":null,"gmCurrentUnit":null,"gmCurrentUnitName":null,"singleUnitName":"台","miniPrice":null,"supplier":null,"referPrice":null,"referencePreSupplier":null,"referenceCustomerNo":null,"wareHouseName":null,"manageSeq":null,"confirm":null,"deptJms":null,"gmSource":2,"specialType":null,"taxPointPrice":null,"totalPrice":null}]')
    },
    //切换添加方式
    changeAddType(tab,event) {
      this.addType = tab.name
    },
    handleSelectionChange(val) {
      this.tableSelectedRow = val
    },
    //分页
    handleCurrentChangeList(val) {
      this.listPage.pageNo = val
      this.search()
    },
    handleSizeChangeList(val) {
      this.listPage.pageSize = val
      this.search()
    },
  },
};
</script>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
/deep/ .goods-manage-dialog {
  height: calc(100% - 20px);
  margin-bottom: 0;
  .el-dialog__body {
    height: calc(100% - 124px);
    padding: 0 20px;
  }
}
.wh100 {
  width: 100%;
  height: 100%;
  .search-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .flex-center {
      display: flex;
      align-items: center;
      .search-btn {
        margin-left: 8px;
      }
    }
  }
  .table-box {
    width: 100%;
    height: calc(100% - 160px);
    .goods-table {
      width: 100%;
      margin-top: 16px;
      border-radius: 6px;
      /deep/ .td-gmStatus-btn {
        border: 1px solid;
        width: fit-content;
        padding: 0 8px;
        border-radius: 4px;
        line-height: 20px;
        font-size: 12px;
        &.btn1 {
          color: #52c41a;
          background-color: #f6ffed;
          border-color: #b7eb8f;
        }
        &.btn0 {
          color: #f5222d;
          background-color: #fff1f0;
          border-color: #ffa39e;
        }
      }
    }
  }
  .table-page {
    width: 100%;
    height: 56px;
    box-sizing: border-box;
    border-top: 1px solid #f2f3f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    .total {
      color: rgba(0,0,0,0.66);
      font-size: 14px;
      line-height: 22px;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: @ntalkColor;
    }
    /deep/ .el-pagination.is-background .el-pager li.active {
      background-color: @ntalkColor;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
      color: @ntalkColor;
    }
    /deep/ .el-pagination.is-background .el-pager li:hover {
      color: @ntalkColor;
    }
  }
  .warning-tip {
    width: 100%;
    box-sizing: border-box;
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    .gth {
      width: 14px;
      height: 14px;
      line-height: 14px;
      font-size: 12px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background-color: #faad14;
      margin-right: 9px;
    }
    span {
      font-size: 14px;
      color: #1f1e1d;
    }
  }
  .manual-form {
    width: 100%;
    height: calc(100% - 120px);
  }
  .manual-info {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin-top: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: #fff;
    overflow-y: auto;
    .row {
      display: flex;
      margin-bottom: 16px;
      /deep/ .el-form-item {
        margin-bottom: 0;
        width: calc(100% - 12px);
        .el-form-item__label {
          text-align: right;
        }
      }
      &.w100 {
        width: 100%;
      }
      &.w50 {
        width: 50%;
      }
    }
  }
}
.rbtn {
  background-color: @ntalkColor !important;
  border-color: @ntalkColor !important;
}
</style>
